<template>
  <div class="organization-box">
    <img
      src="../assets/image/org.jpg"
      alt=""
      style="
        display: block;
        width: 100%;
        height: 150px;
        margin: 0 auto;
        padding-bottom: 20px;
      "
    />
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="">
        <el-button
          @click="
            formInline = {};
            fetch();
          "
          >全部</el-button
        >
      </el-form-item>
      <el-form-item label="社团名称">
        <el-input
          v-model="formInline.organization_name"
          placeholder="请输入社团名称"
          size="mini"
        />
      </el-form-item>

      <el-form-item label="所属院系">
        <el-select v-model="formInline.department_id" placeholder="所属院系">
          <el-option
            v-for="item in options"
            :label="item.department_name"
            :value="item.department_id"
            :key="item"
            >{{ item.department_name }}</el-option
          >
        </el-select>
      </el-form-item>
      <el-form-item label="社团类型">
        <el-select v-model="formInline.associType" placeholder="社团类型">
          <el-option
            v-for="item in options1"
            :label="item.type_name"
            :value="item.type_id"
            :key="item"
            >{{ item.type_name }}</el-option
          >
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
      </el-form-item>
    </el-form>
    <div style="display: flex; flex-wrap: wrap; margin: 0 auto">
      <div
        v-for="(item, index) in organizationList"
        :key="index"
        @click="$router.push('/organization-detail/' + item.organization_id)"
        class="games_item"
        style="width: 33%"
      >
        <div
          class="left"
          style="display: flex; align-items: center; flex-direction: column"
        >
          <div class="icon">
            <img
              :src="imgUrl + item.icon"
              alt=""
              style="width: 150px; height: 150px; border-radius: 50%"
            />
          </div>
          <div class="center" style="text-align: center; margin: 10px 0">
            <div class="name">{{ item.organization_name }}</div>
          </div>
          <div class="center" style="text-align: center; margin: 10px 0">
            <div class="name">{{ item.tenet }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//引入社团列表组件
import OrganizationList from "@/components/OrganizationList";
export default {
  //引入组件
  components: {
    OrganizationList,
  },
  data() {
    return {
      organizationList: [],
      imgUrl: process.env.VUE_APP_IMG_URL,
      //提交搜索信息
      formInline: {
        associType: "",
      },
      options: [],
      options1: [],
    };
  },
  mounted() {
    //获取社团列表信息
    this.fetch();
    //获取社团类型列表信息
    this.bFetch1();
    //获取院系列表信息
    this.bFetch();
  },
  methods: {
    //获取社团类型列表信息
    async bFetch1() {
      const { data } = await this.$http.getClubType();

      this.options1 = data.data;
    },
    //获取院系列表信息
    async bFetch() {
      const { data } = await this.$http.getDepartment();
      this.options = data.data;
    },
    //提交搜索
    onSubmit() {
      this.fetch();
    },
    //获取社团列表信息
    async fetch() {
      const { data } = await this.$http.getOrganization({
        page: 1,
        limit: 100,
        ...this.formInline,
        status: 1,
      });
      this.organizationList = data.data;
    },
  },
};
</script>

<style lang="scss" scoped>
.organization-box {
  width: 85%;
  margin: 0 auto;
  min-height: 700px;
  background-color: rgb(248, 248, 252);
  .bottom-button {
    border: none;
    background-color: #00d09e;
  }
}
</style>
